<!--
@Description:采购订单
@Author:zqy
@Date:2022-10-21 14:28:32
@Last Modified by:zqy
@Last Modified time:2022-10-21 14:28:32
-->
<template>
  <div class="content">
    <ComHeader :arrow="false" :border="false" title-left bg-color="#FFFFFF" title="采购订单" @get-height="handleHeadHeight" />
    <div class="page-search" :style="{'top':headHeight+'px'}">
      <SearchInput v-model="searchValue" class="search" :icon-right="false" placeholder="请输入接单号或顾客姓名" @search="handleSearch" @enter="handleSearch" />
    </div>
    <OrderNavFilter @change="handleChangePage">
      <List
        ref="list"
        component-name="OrderNavFilter"
        :class="{'c-list-scroll':list.length>0}"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
        :default-active="true"
      >
        <Item
          v-for="(c,i) in list"
          ref="refItem"
          :key="i"
          :item-data="c"
          :order-status-list="orderStatusList"
        />
      </List>
    </OrderNavFilter>
    <Tabbar />
  </div>
</template>
<script>
import Tabbar from '@/components/Tabbar'
import SearchInput from '@/components/SearchInput'
import OrderNavFilter from './components/NavFilter'
import List from '@/components/List'
import Item from './components/Item'
import { getOrderList } from '@/apis/purOrder'
import { json2FormData } from '@/utils'
import { getDictByPatchType } from '@/apis/dataDict'
import { bus } from '@/utils/bus'

export default {
  name: 'PurOrderList',
  components: {
    Tabbar, SearchInput, OrderNavFilter, List, Item
  },
  data() {
    return {
      headHeight: 50,
      searchValue: '',
      otherFilters: [{ id: 'stage', property: 'stage', operator: '=', value: 'DealerPriceConfirm' }],
      list: [],
      finished: false, // 列表是否加载完成
      orderStatusList: [] // 订单状态数据字典
    }
  },
  // 监控data中的数据变化
  watch: {

  },
  async created() {
    bus.$on('refreshCustomerItem', this.refreshCustomerItem)

    const dictTypeCodes = ['CRM_PURCHASE_ORDER_STATUS']
    const dictData = await getDictByPatchType({ dictTypeCodes })
    this.orderStatusList = dictData.CRM_PURCHASE_ORDER_STATUS || []
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === '/') {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    refreshCustomerItem({ type }) {
      if (type === 'confirm') {
        // 新建：刷新操作时所停留的列表页
        this.resetPageData()
        return
      }
    },
    handleHeadHeight(h) {
      this.headHeight = h
    },
    handleSearch(value) {
      this.searchValue = value
      this.resetPageData()
      // this.$router.push({
      //   path: '/purOrder/search/result',
      //   query: { keyword: value }
      // })
    },
    handleChangePage(val) {
      const filters = [{ id: 'stage', property: 'stage', operator: '=', value: 'DealerPriceConfirm' }] // 待确认订单
      this.otherFilters = val.type === 'confirm' ? filters : []
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      let paramsRaw = { queryFollowUpUser: 1 }
      if (this.searchValue) {
        paramsRaw = Object.assign({}, paramsRaw, { searchKeyword: this.searchValue })
      }

      const data = json2FormData({
        filtersRaw: JSON.stringify(this.otherFilters),
        paramsRaw: JSON.stringify(paramsRaw),
        sort: 'createTime',
        order: 'desc',
        page,
        rows
      })
      return getOrderList(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    }
  }
}
</script>
<style lang="less" scoped>
.page-search{
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;

  .search {
    ::v-deep .van-field__control::-webkit-input-placeholder {
      font-size: 14px;
      font-weight: 400;
      color: #B5B7C4;
      line-height: 20px;
    }
    ::v-deep .search-input {
      border-radius: 12px;
    }
  }
}

</style>
